<template>
  <span :class="getStatusClass(result)" class="flag-item">
    {{ index + 1 }}: {{ getResultText(result) }}
  </span>
</template>

<script>
export default {
  props: {
    result: {
      type: Object,
      default: () => ({})
    },
    index: {
      type: Number,
      default: 0
    }
  },
  methods: {
    getStatusClass(result) {
      if (result.isAnswered && result.userAnswer === result.correctAnswer) {
        return 'right';
      } else if (result.isAnswered && result.userAnswer!== null) {
        return 'error';
      }
      return 'undo';
    },
    getResultText(result) {
      if (result.isAnswered && result.userAnswer === result.correctAnswer) {
        return '回答错误';
      } else if (result.isAnswered && result.userAnswer!== null) {
        return '回答正确';
      }
      return '未完成';
    }
  }
};
</script>

<style scoped>
.right {
  color: green;
}
.error {
  color: red;
}
.undo {
  color: #ccc;
}
</style>